<template>
	<view class="">
		<Header :title="t('management.help')" />
		<view class="main-box">
			<up-cell-group :border="false" class="cell-list">
				<up-cell
					v-for="(item, index) in helpList"
					:key="index"
					:title="item.title">
					<template #right-icon>
						<up-text
							:text="item.content"
							size="14"
							color="rgba(0, 0, 0, 0.9)"></up-text>
					</template>
				</up-cell>
			</up-cell-group>
			<view class="copy">
				<up-text
					@click="copyFun"
					align="center"
					:text="t('oneKeyCopy')"
					size="16"
					color="rgba(0, 0, 0, 0.9)"></up-text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import Header from "@/components/header/index.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useDeviceStore } from "@/stores/device";
import { useI18n } from "vue-i18n";
import BASE_URL from "../../baseUrl";
const { locale, t } = useI18n();
const defaultDevice = useUniversalStorage("DefaultDevice", {});
const traceId = useUniversalStorage("trace_id", "");
const deviceStore = useDeviceStore();
const helpList = reactive([
	{
		title: t("help.list.0"),
		content: "333",
	},
	{
		title: t("help.list.1"),
		content: "",
	},
	{
		title: t("help.list.2"),
		content: "",
	},
	{
		title: t("help.list.3"),
		content: "",
	},
	{
		title: t("help.list.4"),
		content: "",
	},
	{
		title: t("help.list.5"),
		content: "",
	},
	{
		title: t("help.list.6"),
		content: "",
	},
	{
		title: t("help.list.7"),
		content: "",
	},
	{
		title: "trace_id",
		content: "",
	},
]);
const setHelpInfo = () => {
	// #ifdef APP-PLUS
	helpList[0].content =
		plus.runtime.version + (BASE_URL.includes("test") ? " - test" : "");
	helpList[1].content = plus.runtime.versionCode;
	// #endif
	// #ifdef H5
	helpList[0].content = BASE_URL.includes("test") ? "test" : "";
	helpList[1].content = " ";
	// #endif
	helpList[2].content =
		defaultDevice.value?.name || defaultDevice.value?.device_sn;
	helpList[3].content = defaultDevice.value?.device_sn;
	helpList[4].content =
		defaultDevice.value?.report_firmware_version ||
		defaultDevice.value?.firmware_version ||
		" ";
	helpList[5].content = defaultDevice.value?.frpc_port || " ";
	helpList[6].content = deviceStore.defaultDeviceMap?.map_info.map_id || " ";
	helpList[7].content = deviceStore.defaultPlan?.planid || " ";
	helpList[8].content = traceId.value || " ";
};
const copyFun = () => {
	const contentLines = helpList.map(
		(element) => `${element.title}:${element.content}`
	);
	const content = contentLines.join("\n");
	uni.setClipboardData({
		data: content,
		success: function () {
			uni.hideToast();
			uni.showToast({
				title: t("copyOk"),
				icon: "success",
				duration: 2000,
			});
		},
	});
};
onMounted(() => {
	setHelpInfo();
});
</script>

<style lang="scss" scoped>
.main-box {
	padding: 30rpx;
	box-sizing: border-box;
}

.cell-list {
	background-color: #fff;
	border-radius: 10px;
	padding: 15px;
	:deep(.u-cell__title-text) {
		font-size: 14px !important;
	}
	:deep(.u-cell__body) {
		padding: 15px 4px !important;
	}
	:deep(.u-text) {
		width: fit-content !important;
		flex: 0 1 auto !important;
		justify-content: flex-end;
		text-align: right;
	}
}
:deep(.u-cell:last-child) {
	.u-line {
		border: none !important;
	}
}
.copy {
	margin-top: 30rpx;
	background: #fff;
	border-radius: 10px;
	text-align: center;
	padding: 10px;
}
</style>
